<template>
  <Layout :class="prefixCls" v-bind="lockEvents">
    <LayoutFeatures />
    <LayoutHeader fixed v-if="getShowFullHeaderRef" />
    <Layout :class="[layoutClass]">
      <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
      <Layout :class="`${prefixCls}-main`">
        <LayoutMultipleHeader />
        <LayoutContent />
        <LayoutFooter />
      </Layout>
    </Layout>
  </Layout>
</template>

<script lang="ts">
import { defineComponent, computed, unref } from 'vue'
import { Layout } from 'ant-design-vue'

import LayoutHeader from './header/index.vue'
import LayoutContent from './content/index.vue'
import LayoutSideBar from './sider/index.vue'
import LayoutMultipleHeader from './header/MultipleHeader.vue'
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
import { useDesign } from '@/hooks/web/useDesign'
import { useLockPage } from '@/hooks/web/useLockPage'
import { useAppInject } from '@/hooks/web/useAppInject'
import LayoutFeatures from '@/layouts/default/feature/index.vue'
import LayoutFooter from '@/layouts/default/footer/index.vue'

export default defineComponent({
  name: 'DefaultLayout',
  components: {
    LayoutFeatures,
    LayoutFooter,
    LayoutHeader,
    LayoutContent,
    LayoutSideBar,
    LayoutMultipleHeader,
    Layout,
  },
  setup() {
    const { prefixCls } = useDesign('default-layout')
    const { getIsMobile } = useAppInject()
    const { getShowFullHeaderRef } = useHeaderSetting()
    const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting()

    // Create a lock screen monitor
    const lockEvents = useLockPage()

    const layoutClass = computed(() => {
      let cls: string[] = ['ant-layout']
      if (unref(getIsMixSidebar) || unref(getShowMenu)) {
        cls.push('ant-layout-has-sider')
      }
      return cls
    })

    return {
      getShowFullHeaderRef,
      getShowSidebar,
      prefixCls,
      getIsMobile,
      layoutClass,
      lockEvents,
    }
  },
})
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-default-layout';

.@{prefix-cls} {
  display: flex;
  width: 100%;
  min-height: 100%;
  background-color: @content-bg;
  flex-direction: column;

  > .ant-layout {
    min-height: 100%;
  }

  &-main {
    width: 100%;
    margin-left: 1px;
  }
}
</style>
